<template>
  <div class="imgBox">
    <div class="imgBox-operate">
      <div @click.stop="openViewer">
        <el-icon>
          <ZoomIn />
        </el-icon>
        <p>预览</p>
      </div>
      <template v-for="(item, index) in operate" :key="index">
        <div @click.stop="clickBtn(item)">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <p>{{ item.title }}</p>
        </div>
      </template>
    </div>
    <el-image :style="{
      width: proxy.$size(width),
      height: proxy.$size(height || width),
    }" :src="urlKey && data ? data[urlKey] : data" :preview-src-list="viewerList" v-bind="{
      fit: 'contain',//'' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
      ...$attrs,
    }" lazy>
      <template #error>
        <div class="image-slot">
          <el-icon>
            <Picture />
          </el-icon>
          <p>暂无图片</p>
        </div>
      </template>
    </el-image>
    <el-image-viewer v-if="showViewer" @close="onClose" :url-list="viewerList" />
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;//预览图
    urlKey?: string;//预览图key值
    urlList?: any;//预览图组
    list?: any;//数组
    operate?: any;//操作
    width?: number | string;
    height?: number | string;
  }>(),
  {
    width: 120,
  },
);
const viewerList = computed(() => {
  if (props.urlKey) {
    if (props.urlList && Array.isArray(props.urlList)) {
      return props.urlList.map((el: any) => el[props.urlKey])
    } else {
      return [props.data[props.urlKey]]
    }
  } else {
    return props.urlList || props.data
  }
})
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'clickBtn', operateRow: any, row: any): void;
}>();
const clickBtn = (operateRow: any) => {
  emit('clickBtn', operateRow, props.data);
};
const showViewer = ref(false);
const openViewer = () => {
  showViewer.value = true;
};
const onClose = () => {
  showViewer.value = false;
};


</script>
<style scoped lang="scss">
.imgBox {
  display: flex;
  position: relative;

  &:hover {
    .imgBox-operate {
      display: flex;

      >* {
        cursor: pointer;

        >* {
          &:not(:last-child) {
            margin-bottom: 4px;
          }
        }

        &:hover {
          color: $primary;
        }
      }
    }

  }

  .imgBox-operate {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba($color: #000000, $alpha: 0.7);
    color: $white;
    z-index: 2;
    display: none;
    justify-content: center;
    align-items: center;

    >* {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      &:not(:last-child) {
        margin-right: 12px;
      }

      .el-icon {
        margin: 0;
        font-size: 16px;
      }

      p {
        font-size: 12px;
      }
    }
  }
}

.el-image {
  background: var(--el-fill-color-light);

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: var(--el-text-color-secondary);

    .el-icon {
      font-size: 30px;
    }

    p {
      font-size: 12px;
    }
  }
}
</style>
